<template>
        <el-card shadow="always" >
          <!--按钮区域    -->
          <div style="margin:5px">
            <el-button plain  size="mini" @click="handleExpand"><i class="el-icon-sort"></i>&nbsp;展开/折叠</el-button>
          </div>
          <!-- 列表区-->
          <el-table :data="tableTreeData" row-key="menuId" ref="dataTreeList" :header-cell-style="{background:'#F8F8F9'}"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

            <el-table-column prop="menuName" label="菜单名称" align="center"></el-table-column>
            <el-table-column prop="icon" label="图标" align="center">
              <template #default="scope">
                <i :class="scope.row.icon"></i>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="url" label="菜单路径" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="260">
              <template #default="scope">
                <button type="button" class="el-button el-button--text el-button--mini"><!----><i class="el-icon-edit"></i><span>修改</span></button>

                <button type="button" @click="add(scope.row)" class="el-button el-button--text el-button--mini"><!----><i class="el-icon-plus"></i><span>新增</span></button>

                <button type="button" @click="handleDelete(scope.row)" class="el-button el-button--text el-button--mini"><!----><i class="el-icon-delete"></i><span style="color:red">删除</span></button>

              </template>
            </el-table-column>
          </el-table>


          <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :append-to-body="true" >
            <el-form ref="menu" :model="menu" label-width="120px">
              <el-form-item label="上级菜单">
                <treeselect :value="value" v-model="menu.pid" :multiple="false" :normalizer="normalizer"  :options="menuOptions" placeholder="选择上级菜单"/>

              </el-form-item>

              <el-form-item label="菜单名称:">
                <el-input v-model="menu.menuName" style="width:80%"></el-input>
              </el-form-item>
              <el-form-item label="菜单类型:">
                <el-radio v-model="menu.menuType" label="1">目录</el-radio>
                <el-radio v-model="menu.menuType" label="2">菜单</el-radio>
              </el-form-item>

              <el-form-item label="菜单图标:">
                <e-icon-picker v-model="menu.icon" :highLightColor="highLightColor"  :zIndex="zIndex" style="width:80%"/>

              <!--<e-icon :icon-name="icon"/>-->
              </el-form-item>

              <el-form-item label="菜单路由:">
                <el-input v-model="menu.url" style="width:80%"></el-input>
              </el-form-item>

            </el-form>
            <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
            </template>
          </el-dialog>
        </el-card>
</template>

<script>
import request from "../utils/request";
import {EIcon, EIconPicker,} from 'e-icon-picker';
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: "Menu",
  components: {Treeselect, EIconPicker, EIcon},

  created() {
    this.load()
  },
  data() {
    return {

      title: '',
      dialogVisible: false,
      tableTreeData: [],
      menu: {},
      //vue_treeSelect
      value: null,
      menuOptions: [],
      highLightColor: "#fc1944",
      //icon组件
      icon: '',
      zIndex: 3500
    }
  },
  methods: {
    load() {
      let user=JSON.parse(sessionStorage.getItem("user"));
      request.get("/sys/menuTree/"+user.id).then(res => {
        this.tableTreeData = res.data
      })
    },


    //获取下拉树
    getTreeSelect() {
      let user=JSON.parse(sessionStorage.getItem("user"));
      request.get("/sys/menuTree/"+user.id).then(res => {
        this.menuOptions = res.data
      })
    },


    //新增打开弹窗方法
    add(row) {
      this.menu = {}; //清空表单中的值
      this.getTreeSelect();
      if (row != null && row.menuId) {
        this.menu.pid = row.menuId;
        this.value = row.menuName;
      } else {
        this.menu.pid = 0;
      }
      this.dialogVisible = true;
      this.title = "新增"
    },

    save() {
      request.post("/sys/saveMenu", this.menu).then(res => {
        this.$message({
          type: "success",
          message: res.msg
        })
        this.dialogVisible = false;    //最后关闭弹窗

      })
      this.load();  //完成后，重新刷新表格数据
    },

    //列表删除提示框
    handleDelete(row) {
      this.$confirm('确定删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        request.delete("/sys/delMenu/" + row.menuId).then(res => {

          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "删除成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load()
        })
      })
    },


    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      };
    },

    cancel() {
      this.dialogVisible = false;
      this.menu = {};
    },



    // 是否展开table(展开与折叠切换)
    handleExpand() {
      this.isExpand = !this.isExpand
      this.$nextTick(() => {
        this.forArr(this.tableTreeData, this.isExpand)
      })
    },

    // 遍历
    forArr(arr, isExpand) {
      arr.forEach(i => {
        // toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        this.$refs.dataTreeList.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    },

  }

}
</script>

<style scoped>
.el-button--mini {
  font-size: 12px;
}

.vue-treeselect {
  width: 80%;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-icon-delete{
  color:red
}

</style>
